<template>
  <el-dialog
      :model-value="dialogVisible"
      :title="dialogProductTitle"
      width="40%"
      @close="handleClose"
  >
    <el-form :model="form" ref="formRef" label-width="90px" :rules="rules">
      <el-form-item label="产品名称" prop="cpmc">
        <el-input v-model.trim="form.cpmc" />
      </el-form-item>
      <el-form-item label="图片名称">
        <el-input disabled v-model="tpmc" />
      </el-form-item>
      <el-form-item label="图片上传">
        <my-upload
        :file-type="'product'"
        @get-form-pic-value="getFormPicValue"
        >
        </my-upload>
      </el-form-item>
      <el-form-item label="产品规格" prop="cpgg">
        <el-input v-model.trim="form.cpgg" />
      </el-form-item>
      <el-form-item label="保质期" prop="cpbzq">
        <el-input v-model.trim="form.cpbzq" placeholder="单位：月"/>
      </el-form-item>
        <el-form-item label="生产日期" prop="scrq">
            <el-date-picker
                    v-model="form.scrq"
                    type="date"
                    placeholder="选择日期"
                    clearable
            />
        </el-form-item>
      <el-form-item label="产品介绍" prop="cpjs">
        <el-input  v-model.trim="form.cpjs" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineEmits, ref, defineProps, onMounted} from 'vue'
import MyUpload from "@/components/commons/myUpload.vue";

const tpmc = ref('')
const getFormPicValue = (value)=> {
  console.log(value)
  form.value.cptp = value.pic
  tpmc.value = value.tpmc
}
const props = defineProps({
  dialogProductTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogProductTableValue: {
    type: Object,
    default: {}
  },
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const formRef = ref(null)
const form = ref({
  cpmc: '',
  cptp: '',
  cpgg: '',
  cpbzq: '',
  cpjs: '',
  qydm: '',
  cpbh: '',
  scrq: ''
})

onMounted(()=> {
  form.value = props.dialogProductTableValue
})

const rules = ref({
  cpmc: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  cpbzq: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  cpgg: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
  scrq: [{
    required: true,
    message: '不能为空',
    trigger: ['blur', 'change'],
  }],
})
const emits = defineEmits(['update:modelValue', 'handleConfirm'])
const handleClose = ()=> {
  emits('update:modelValue', false)
}
const handleConfirm = async ()=> {
  emits("handleConfirm", {...form.value}, {...formRef.value})
}
</script>

<style scoped>

</style>